import React from 'react';
import { connect } from 'dva';
import Poker from '../Poker/Poker';
import styles from './Opponent.css';

class Opponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      poker: [true],
      username: this.props.data,
      balance: null,
      bet: null,
      discard: false,
    };
  }

  componentWillReceiveProps(nextProps) {
    const room = nextProps.room;
    const username = this.state.username;
    const style = this.refs.tips.style;
    const stake = room.stake;
    if (room.msg.userObj) {
      const userObj = room.msg.userObj;
      userObj.forEach((e) => {
        if (e.username === username) {
          this.setState({ balance: e.balance });
        }
      });
    }
    if (stake) {
      if (stake.at === username) {
        style.display = 'block';
      } else {
        style.display = 'none';
      }
      if (stake.username === username) {
        this.setState({ bet: stake.bet });
        if (stake.discard) {
          this.setState({ discard: true });
        }
      }
      if (stake.overs) {
        this.setState({ bet: 0 });
      }

    }
    if (nextProps.poker) {
      this.setState({ poker: nextProps.poker });
    }
  }
  render() {
    return (
      <div className={styles.root}>
        <div className={styles.tips} ref="tips" />
        {
          this.state.poker.map((e, i) => {
            return (<Poker key={i} data={e} />);
          })
        }
        <div className={styles.user}>
          <div className={styles.username}>用户名：{this.state.username}</div>
          <div className={styles.sum} >总资产：￥{this.state.balance}</div>
          <div className={styles.bet}>下注：￥{this.state.bet}</div>
          <div className={styles.discard}>{this.state.discard ? '已弃牌' : ''}</div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  const room = state.room;
  // const ready = state.ready.data;
  return { room };
}

export default connect(mapStateToProps)(Opponent);
